<template>
  <div style="width: 100%; height: 100%">
    <div class="header">
      <div class="title">
        <img src="@/assets/images/welcomeTitle1.png">
        超期预警情况-缺陷
      </div>

    </div>
    <div class="content_main">
      <div class="content">
        <img src="@/assets/images/model5_2.png" class="img" alt>
        <div class="main">
          <div class="item_item">
            <p
              class="title_text"
              @click="routeClick(current == 0 ? '1C' : '一级', 'dangerDateCount')">{{ data.count1c || 0 }}</p>
            <p class="title_content">{{ current == 0 ? "1C" : "一级" }}</p>
          </div>
          <div class="item_item">
            <p
              class="title_text"
              @click="routeClick(current == 0 ? '2C' : '二级A', 'dangerDateCount')">{{ data.count2c || 0 }}</p>
            <p class="title_content">{{ current == 0 ? "2C" : "二级A类" }}</p>
          </div>
          <div class="item_item">
            <p
              class="title_text"
              @click="routeClick(current == 0 ? '4C' : '二级B', 'dangerDateCount')">{{ data.count4c || 0 }}</p>
            <p class="title_content">{{ current == 0 ? "4C" : "二级B类" }}</p>
          </div>
        </div>
      </div>
      <div class="content">
        <img src="@/assets/images/model5_1.png" class="img" alt>
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: calc(100% - 75px);
          ">
          <div style="width: 33.3%">
            <p
              class="title_text"
              @click="routeClick(current == 0 ? '1C' : '一级', 'overDateCount')">{{ data.warning1c || 0 }}</p>
            <p class="title_content">{{ current == 0 ? "1C" : "一级" }}</p>
          </div>
          <div style="width: 33.3%">
            <p
              class="title_text"
              @click="routeClick(current == 0 ? '2C' : '二级A', 'overDateCount')">{{ data.warning2c || 0 }}</p>
            <p class="title_content">{{ current == 0 ? "2C" : "二级A类" }}</p>
          </div>
          <div style="width: 33.3%">
            <p
              class="title_text"
              @click="routeClick(current == 0 ? '4C' : '二级B', 'overDateCount')">{{ data.warning4c || 0 }}</p>
            <p class="title_content">{{ current == 0 ? "4C" : "二级B类" }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDefectOverWarn } from '@/api/cms/index/index.js'
import { defectLevelList } from '@/api/platform'
export default {
  components: {},
  props: {
    deptCode: {
      type: String,
      default: ''
    },
    railTypes: {
      type: String,
      default: ''
    },
    current: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      data: {},
      defectLevelData: []
    }
  },
  watch: {
    railTypes(ov) {
      this.init()
    },
    current(ov) {
      this.init()
    }
  },

  mounted() {
    this.init()
  },
  methods: {
    init() {
      defectLevelList().then((response) => {
        this.defectLevelData = response.data
      })
      getDefectOverWarn({
        deptCode: this.deptCode,
        railTypes: this.railTypes,
        railTypeList: this.railTypes.split(','),
        type: 0
      }).then((res) => {
        this.data = res.data
      })
    },
    routeClick(type, countMessage) {
      var defectLevelId = null
      console.log(this.defectLevelData)
      this.defectLevelData.forEach(item => {
        if (item.levelName === type) {
          defectLevelId = item.id
        }
      })
      this.$router.push({
        // path: '/cms/analysis-management/defect-management/defectInfo',
        path: '/cms/index/defectInfo',
        query: {
          countMessage: countMessage,
          defectLevelId: defectLevelId
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  height: 70px;
  line-height: 70px;
  z-index: 99;
  display: flex;
  align-items: center;
}
.tabs {
  background: rgba(4, 24, 56, 0.6);
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 35px;
  text-align: center;
  color: rgba(18, 155, 255, 0.7);
  cursor: pointer;
  width: 50%;
  border: 1px solid rgba(84, 113, 255, 0.6);
}

.content {
  height: 65px;
  display: flex;
  width: 100%;
  background: url('../model6backImg.png');
  background-size: 100% 100%;
  border-radius: 12px;

}
.title_text {
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  line-height: 35px;
  color: #66ffff;
  text-align: center;
  cursor: pointer;
}
.tabsCurrent {
  border: 1px solid #66ffff;
  color: #66ffff;
}
.title_content {
  font-size: 16px;
  line-height: 30px;
  text-align: center;
  color: #fff;
}
.title_bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.img {
  width: 65px;
  height: 100%;
}
.header {
  position: relative;
  width: 100%;
  height: 70px;
  display: flex;
  padding: 0 15px;
  justify-content: space-between;
  align-items: center;
}
.tabsList {
  display: flex;

  width: 100px;
  box-sizing: border-box;
}
.content_main {
  height: calc(100% - 70px);
  width: 100%;
  padding: 10px 30px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.main {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 75px);
}
.item_item {
  width: 33.3%;
}
</style>
